{% block sw_extension_config %}
<sw-meteor-page
    class="sw-extension-config"
    :from-link="fromLink"
>
    <template #smart-bar-icon>
        <sw-extension-icon
            class="sw-extension-config__extension-icon"
            :src="image"
            :alt="$tc('sw-extension-store.component.sw-extension-config.imageDescription', { extensionName: extensionLabel}, 0)"
        />
    </template>

    <template #smart-bar-header>
        {{ extensionLabel }}
    </template>

    <template
        v-if="extension"
        #smart-bar-header-meta
    >
        <span v-if="extension.producerWebsite && extension.producerName">
            {{ $tc('sw-extension-store.component.sw-extension-config.labelBy') }}

            <sw-external-link
                small
                :href="extension.producerWebsite"
                class="sw-extension-config__producer-link"
            >
                {{ extension.producerName }}
            </sw-external-link>
        </span>

        <span v-else-if="extension.producerName">
            {{ $tc('sw-extension-store.component.sw-extension-config.labelBy') }} {{ extension.producerName }}
        </span>
    </template>

    <template #smart-bar-actions>
        <mt-button
            variant="primary"
            class="sw-extension-config__save-action"
            size="default"
            @click.prevent="onSave"
        >
            {{ $tc('global.default.save') }}
        </mt-button>
    </template>

    <template #default>
        <sw-system-config
            ref="systemConfig"
            :domain="domain"
            sales-channel-switchable
            :sales-channel-id="salesChannelId"
        />
    </template>
</sw-meteor-page>
{% endblock %}
